<template>
  <div class="vx-upload-large">
    <ui-upload
      class="upload-main"
      drag
      action=""
      :limit="limit"
      :accept="acceptType"
      ref="upload"
      :on-change="handleFileChange"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :http-request="uploadFile"
      :file-list="fileList"
    >
      <slot>
        <img src="~@/assets/image/common/updata.png" alt="上传" />
        <div class="center">
          <em>点击或将文件拖到此处上传</em>
        </div>
        <div class="support">支持扩展名:{{ acceptType }} 格式</div>
      </slot>
    </ui-upload>

    <!-- 上传重复下载-->
    <ui-dialog :visible.sync="isDialog" width="40%" center>
      <div class="repeat">
        <div>
          <img src="~@/assets/image/common/warning.png" alt="上传报错" />
        </div>
        <p>{{ errorMsg }}</p>
        <div class="justify-center">
          <ui-button class="primary-long-btn" @click="isDialog = false">确定</ui-button>
        </div>
      </div>
    </ui-dialog>
  </div>
</template>

<script>
export default {
  name: 'vxUploadLarge',
  props: {
    limit: {
      type: Number,
      default: 5,
    },
    acceptType: {
      type: String,
      default: '.xls,.xlsx,.txt,.csv',
      validator: (type) => {
        const fileType = ['xlsx', 'xls', 'txt', 'csv'];
        const file = type
          .replace(/\./g, '')
          .replace(/\s/g, '')
          .split(',');
        return file.every((item) => fileType.indexOf(item) !== -1);
      },
    },
  },
  data() {
    return {
      filePercent: 50, // 进度百分比
      isDialog: false, // 上传报错的弹框
      fileList: [],
      file: null,
      errorMsg: '', // 弹窗提示文字
      repeatIndex: -1, //重复文件suoyin
      beforeUploadVerify: false, //上传之前的校验
      errorFileUid: '', //错误的文件唯一标识
    };
  },
  methods: {
    handleFileChange(file, fileList) {
      this.beforeUploadVerify = this.beforeUpload(file);
      if (this.errorFileUid) {
        fileList.forEach((item, index) => {
          if (item.uid === this.errorFileUid) {
            this.fileList.splice(index, 1);
          }
        });
      }
      //当有重复文件，删除掉重复文件，否则会在页面展示出重复的文件
      if (this.repeatIndex !== -1) {
        fileList.splice(this.repeatIndex + 1, 1);
      }
      if (this.beforeUploadVerify) {
        this.file = file;
        this.fileList = [...this.fileList, file];
      }
    },
    // 上传前校验格式
    beforeUpload(file) {
      const typeList = this.acceptType
        .replace(/\./g, '')
        .replace(/\s/g, '')
        .split(',');
      // 上传文件类型校验
      let FileExt = file.name.replace(/.+\./, '').toLowerCase();
      const isType = typeList.some((item) => item.includes(FileExt));
      // 错误文件类型
      if (!isType) {
        this.errorFileUid = file.uid;
        this.isDialog = true;
        this.errorMsg = '不可上传此类型的文件';
        return false;
      }
      if (this.fileList.length) {
        for (let item of this.fileList) {
          let repetIndex = file.name.indexOf(item.name);
          this.repeatIndex = repetIndex;
          // 重复文件名
          if (repetIndex > -1) {
            this.isDialog = true;
            this.errorMsg = '不可重复提交';
            return false;
          }
        }
      }
      return isType && this.repeatIndex === -1;
    },
    // 自定义文件上传
    uploadFile() {
      //错误文件类型和重复文件不执行上传
      if (this.beforeUploadVerify) {
        this.$emit('succUpload', this.file, this.fileList);
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.$emit('handleRemove', file, fileList);
    },
  },
};
</script>

<style lang="scss">
.vx-upload-large {
  .ui-upload {
    display: block;
  }
  .upload-main .ui-upload-dragger {
    background: #fafafa;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    width: 300px;
    height: 130px;
    line-height: 24px;
    img {
      width: 34px;
      height: auto;
      margin-top: 15px;
    }
    .support {
      font-size: $s12;
      margin-top: 5px;
    }
    .center {
      margin-top: 10px;
      font-size: $s14;
    }
  }
  .upload-warning {
    color: $color-danger;
    font-size: $s12;
    line-height: 1;
    padding-top: 4px;
  }
  .repeat {
    p {
      margin-top: 17px;
      margin-bottom: 31px;
      text-align: center;
      color: $color-text-main;
      line-height: 22px;
      font-weight: $font-weight-semibold;
      font-size: $s16;
    }
    div:nth-child(1) {
      text-align: center;
      img {
        width: 60px;
        margin: 0 auto;
        margin-top: 20px;
      }
    }
  }
}
</style>
